<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-button type="primary" @click="refresh"
          ><i class="el-icon-refresh"></i>&nbsp;刷新</el-button
        >
        <el-button type="primary" @click="slider"
          ><i class="el-icon-search"></i>&nbsp;筛选</el-button
        ><el-button type="primary" @click="addRow"
          ><i class="el-icon-plus"></i>&nbsp;新建</el-button
        >
      </div>
    </el-card>
    <el-drawer v-if="drawer" title="筛选" :visible.sync="drawer">
      <div class="header" style="display: flex">
        <el-button type="primary" style="margin: 0 8px" @click="search(key)">
          <i class="el-icon-search"></i>&nbsp;搜索
        </el-button>
        <el-button type="warning" style="margin: 0 8px" @click="reset">
          <i class="el-icon-search"></i>&nbsp;重置
        </el-button>
      </div>
      <div class="content" style="padding: 14px">
        <div class="input" style="display: flex">
          <div
            class="label"
            style="
              display: flex;
              border: 1px solid #dbe3e6;
              width: 100px;
              justify-content: center;
              align-items: center;
            "
          >
            <span>ID</span>
          </div>
          <el-input
            v-model="key"
            placeholder="请输入内容"
            @keyup.enter.native="search(key)"
          ></el-input>
        </div>
      </div>
    </el-drawer>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      element-loading-text="拼命加载中"
      stripe
      style="width: 100%"
      border
    >
      <el-table-column type="selection" align="center" />
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型">
        <template slot-scope="scope">
          <el-input
            v-show="scope.row.show"
            v-model="scope.row.type"
            size="small"
            placeholder="请输入内容"
          ></el-input>
          <span v-show="!scope.row.show">{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="跳转地址">
        <template slot-scope="scope">
          <el-input
            v-show="scope.row.show"
            v-model="scope.row.link"
            size="small"
            placeholder="请输入内容"
          ></el-input>
          <span v-show="!scope.row.show">{{ scope.row.link }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="停留时间">
        <template slot-scope="scope">
          <el-input
            v-show="scope.row.show"
            v-model="scope.row.duration"
            size="small"
            placeholder="请输入内容"
          ></el-input>
          <span v-show="!scope.row.show">{{ scope.row.duration }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片地址">
        <template slot-scope="scope">
          <el-input
            v-show="scope.row.show"
            v-model="scope.row.url"
            size="small"
            placeholder="请输入图片地址"
          ></el-input>
          <img
            v-show="!scope.row.show"
            :src="scope.row.url"
            style="background-color: #2f2f4f; width: 80px; height: 80px"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最近更新时间">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{ scope.row.updated_at }}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            v-show="!scope.row.show"
            size="mini"
            type="primary"
            @click="modifyinfo(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-show="!scope.row.show"
            size="mini"
            type="danger"
            @click="deleteinfo(scope.row)"
            >删除</el-button
          >
          <el-button
            v-show="scope.row.show"
            size="mini"
            type="warning"
            @click="confirm(scope.row)"
            >确认</el-button
          >
          <el-button
            v-show="scope.row.show"
            size="mini"
            type="primary"
            @click="cancel(scope.row)"
            >取消</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 10px; float: right">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import * as banner from "@/api/banner";
export default {
  data() {
    return {
      key: "",
      drawer: false,
      direction: "rtl",
      list: null,
      sourceData: [],
      tableData: [],
      currentPage: 1,
      pageSize: 3,
      totalNum: 1000,
    };
  },
  mounted() {
    banner.getbannerList().then(
      (res) => {
        res.forEach((element) => {
          element.show = false;
          element.add = false;
        });
        for (let i = 0; i < res.length; i++) {
          res[i]._index = i;
        }
        this.sourceData = res;
        this.tableData = res;
        this.totalNum = this.tableData.length;
      },
      (error) => {
        console.log(error);
      }
    );
  },
  methods: {
    refresh() {
      location.reload();
    },
    slider() {
      this.drawer = true;
    },
    search(data) {
      let newtable = [];
      this.sourceData.forEach((element) => {
        if (data === String(element.id)) newtable.push(element);
      });
      this.tableData = newtable;
      this.totalNum = newtable.length;
    },
    reset() {
      this.key = "";
      this.tableData = this.sourceData;
      this.totalNum = this.sourceData.length;
    },
    modifyinfo(row) {
      row.show = !row.show;
    },
    confirm(row) {
      // console.log(row.link);
      // console.log(row.img);
      if (row.url === "") {
        alert("图片不能为空！！！");
        return;
      }
      if (row.type === "") {
        alert("类型不能为空！！！");
        return;
      }
      if (row.link === "") {
        alert("路径不能为空！！！");
        return;
      }
      if (row.duration === "") {
        alert("时间不能为空！！！");
        return;
      }
      if (row.add) {
        const addform = {
          url: row.url,
          link: row.link,
          duration: row.duration,
          type: row.type,
        };
        banner.bannerAdd(addform).then(
          (res) => {
            console.log(res);
          },
          (error) => {
            console.log(error);
          }
        );
      } else {
        const editform = {
          url: row.url,
          link: row.link,
          duration: row.duration,
          type: row.type,
        };
        banner.bannerEdit(editform).then(
          (res) => {
            console.log(res);
          },
          (error) => {
            console.log(error);
          }
        );
      }
      row.show = !row.show;
    },
    deleteinfo(row) {
      const postdata = { id: row.id };
      banner.bannerDelete(postdata).then(
        (res) => {
          console.log(res);
          this.tableData.splice(row._index, 1);
          this.totalNum--;
        },
        (error) => {
          console.log(error);
        }
      );
    },
    addRow() {
      this.tableData.push({
        id: "",
        type: "",
        link: "",
        duration: "",
        url: "",
        show: true,
        add: true,
      });
      this.totalNum++;
    },
    cancel(row) {
      row.show = !row.show;
      if (row.add) this.tableData.pop();
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>
